<template>
  <div class="bar-content">
    <viHeader
      :title="configurationInformation.title"
      :radioList="configurationInformation.radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!configurationInformation.showHeader"
    />
    <div class="charts" ref="reference"></div>
  </div>
</template>
<script>
import viHeader from "@/components/visualization/header/index";
import echarts from "echarts";
import request from "@/utils/request";
import Qs from "qs";

export default {
  name: "vi-double-bar",
  components: {
    viHeader,
  },
  props: {
    configurationInformation: {},
    xShow: {
      default: true,
      type: Boolean,
    },
    deptId: {},
    projectId: {},
  },
  data() {
    return {
      infos: {},
      type:'1'
    };
  },
  watch: {
    deptId() {
      this.changeRadio();
    },
    projectId() {
      this.changeRadio();
    },
  },
  mounted() {},
  methods: {
    initTime() {
      const date = new Date();
      const y = date.getFullYear();
      let m = date.getMonth() + 1;
      const d = date.getDate();
      if (m < 10) {
        m = `0${m}`;
      }
      return `${y}`;
    },
    isNumber(val) {
      var regPos = /^\d+(\.\d+)?$/; //非负浮点数
      var regNeg =
        /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
      if (regPos.test(val) || regNeg.test(val)) {
        return true;
      } else {
        return false;
      }
    },
    screenInvoiceAndCollectionMonth(deptId = this.deptId) {
      request({
        url: "/system/screen/monthInOut",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          year: this.initTime(),
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (let i = 0; i < 12; i++) {
          x.push(`${i + 1}月`);
        }
        for (const i in res.data) {
          const data = res.data[i].split("|");
          console.log(this.isNumber(Number(data[0])), data[0]);
          if (!this.isNumber(data[0])) {
            data[0] = 0;
          }
          if (!this.isNumber(data[1])) {
            data[1] = 0;
          }
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.drawInvoiceCollection("1", y1, y2, x);
      });
    },
    screenInvoiceAndCollectionYear(deptId = this.deptId) {
      request({
        url: "/system/screen/yearInOut",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          year: this.initTime(),
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (const i in res.data) {
          x.push(i);
          const data = res.data[i].split("|");
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.drawInvoiceCollection("2", y1, y2, x);
      });
    },
    drawInvoiceCollection(type = "1", yData1, yData2, xData) {
      // 开票与收款
      // console.log(this.configurationInformation);
      // this.configurationInformation.invoiceCollection = {
      //   ...this.configurationInformation.invoiceCollection,
      //   xData,
      //   yData1,
      //   yData2,
      // };
      // this.$refs.invoiceCollection.draw(
      //   this.configurationInformation.invoiceCollection
      // );
      this.$nextTick(() => {
        this.myChart(yData1, yData2, xData);
      });
    },
    require() {
      request({
        url: "/system/screen/monthInOut",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          year: this.initTime(),
          projectId: this.projectId,
        }),
      }).then((res) => {
        const x = [];
        const y1 = [];
        const y2 = [];
        for (let i = 0; i < 12; i++) {
          x.push(`${i + 1}月`);
        }
        for (const i in res.data) {
          const data = res.data[i].split("|");
          console.log(this.isNumber(Number(data[0])), data[0]);
          if (!this.isNumber(data[0])) {
            data[0] = 0;
          }
          if (!this.isNumber(data[1])) {
            data[1] = 0;
          }
          y1.push((Number(data[0]) / 10000).toFixed(4) || 0);
          y2.push((Number(data[1]) / 10000).toFixed(4) || 0);
        }
        this.myChart(y1, y2, x);
      });
    },
    enlarge() {
      this.$emit("enlarge");
    },
    changeRadio(val={radio:'1'}) {
      this.$emit("changeRadio", val.radio);
      let type=val.radio
      this.type = type;
      if (type === "1") {
        this.screenInvoiceAndCollectionMonth();
      } else {
        this.screenInvoiceAndCollectionYear();
      }
    },
    draw(val) {
      // this.infos = val;
      // this.myChart();
    },
    myChart(y1, y2, x) {
      console.log(this.infos);
      const that = this;
      let colorList = ["red", "blue"];
      //   let item = this.item;
      const dom = echarts.init(this.$refs.reference);
      const option = {
        tooltip: {
          trigger: "axis",
          // backgroundColor: "rgba(0, 51, 128, 1)",
          // borderColor: "rgba(0, 79, 197, 1)",
          // borderWidth: 2,
          // padding: 10,
          // textStyle: {
          //   color: "#8FC7FF",
          // },
          formatter: function (params) {
            let time = `${new Date().getFullYear()}年${params[0].axisValue}`;
            if (params[0].axisValue.length > 3) {
              time = `${params[0].axisValue}年`;
            }
            const tip1 = `${params[0].marker}收入:${params[0].value}万元`;
            const tip2 = `${params[1].marker}支出:${params[1].value}万元`;
            return `${time}</br>${tip1}</br>${tip2}`;
          },
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              // 数值样式
              color: this.xShow ? "rgba(68,82,121,.48)" : "rgba(68,82,121,0)",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.12)",
            },
          },
          axisTick: {
            show: false,
          },
          data: x,
        },
        grid: {
          top: "32",
          bottom: "12",
          right: "26",
          left: "16",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          // show: false,
          //网格样式
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(0,0,0,.04)"],
              width: 1,
              type: "solid",
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              // 设置轴颜色
              color: "rgba(0,0,0,.48)",
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "收入",
            data: y1,
            itemStyle: {
              normal: {
                // color: this.infos.colors.default,
                color: "rgba(31, 197, 87, 1)",
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
              // emphasis: {
              //   // color: this.infos.colors.active,
              //   // color: ['blue','green'],
              //   label: {
              //     show: true, // 开启显示
              //     position: "top", // 在上方显示
              //     formatter: function (params) {
              //       console.log(123, params.dataIndex);
              //       params.value = Number(params.value).toFixed(2);
              //       if (that.xShow) {
              //         return params.value;
              //       } else {
              //         return `${params.name}\n${params.value}`;
              //       }
              //     },
              //     textStyle: {
              //       // 数值样式
              //       color: "rgba(68,82,121,1)",
              //       fontSize: 16,
              //       fontWeight: "bold",
              //     },
              //   },
              // },
            },
            type: "bar",
            barWidth: this.infos.barwidth,
          },
          {
            type: "bar",
            name: "支出",
            data: y2,
            itemStyle: {
              normal: {
                // color: this.infos.colors.default,
                color: "rgba(243, 104, 75, 1)",
                label: {
                  show: false, // 开启显示
                  position: "top", // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: "rgba(68,82,121,.48)",
                    fontSize: 16,
                  },
                },
              },
              // emphasis: {
              //   // color: this.infos.colors.active,
              //   // color: ['blue','green'],
              //   label: {
              //     show: true, // 开启显示
              //     position: "top", // 在上方显示
              //     formatter: function (params) {
              //       console.log(123, params.dataIndex);
              //       params.value = Number(params.value).toFixed(2);
              //       if (that.xShow) {
              //         return params.value;
              //       } else {
              //         return `${params.name}\n${params.value}`;
              //       }
              //     },
              //     textStyle: {
              //       // 数值样式
              //       color: "rgba(68,82,121,1)",
              //       fontSize: 16,
              //       fontWeight: "bold",
              //     },
              //   },
              // },
            },
            type: "bar",
            barWidth: this.infos.barwidth,
          },
        ],
      };

      dom.setOption(option);
      window.addEventListener("resize", () => {
        dom.resize();
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "../styles/bar.scss";
</style>
